<template>
  <div class="academic-report">
    <h2>学情报告</h2>

    <!-- 成绩走向图 -->
    <PerformanceChart :data="reportData.performanceTrend" />

    <!-- 知识点掌握情况 -->
    <div class="knowledge-mastery">
      <h3>知识点掌握情况</h3>
      <div class="knowledge-table">
        <div v-for="(item, index) in reportData.knowledgeMastery" :key="index" class="knowledge-item">
          <h4>{{ item.subject }}</h4>
          <table>
            <tr>
              <td>受力分析</td>
              <td>{{ item.analysis }}</td>
            </tr>
            <tr>
              <td>摩擦力</td>
              <td>{{ item.force }}</td>
            </tr>
            <tr v-if="index === 1">
              <td>磁场</td>
              <td>{{ item.field }}</td>
            </tr>
            <tr v-if="index === 1">
              <td>磁生电</td>
              <td>{{ item.electricity }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <!-- 课堂活跃度分析 -->
    <div class="class-engagement">
      <h3>课堂活跃度分析</h3>
      <div v-for="(item, index) in reportData.classEngagement" :key="'engagement-' + index" class="engagement-item">
        <h4>{{ item.course }}</h4>
        <table>
          <tr>
            <td>低头次数</td>
            <td>{{ item.lookDown }}</td>
          </tr>
          <tr>
            <td>回答问题次数</td>
            <td>{{ item.answerQuestions }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import PerformanceChart from './PerformanceChart.vue';

export default {
  components: {
    PerformanceChart
  },
  props: {
    reportData: {
      type: Object,
      required: true
    }
  }
};
</script>

<style scoped>
.academic-report {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 20px;
  margin-top: 40px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

h3 {
  margin: 20px 0 10px;
  color: #555;
}

.knowledge-table, .class-engagement {
  margin-top: 20px;
}

.knowledge-item, .engagement-item {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid #eee;
}

td {
  padding: 8px 12px;
}

td:first-child {
  width: 40%;
}
</style>
